<script setup>
import {isProxy, isReactive, provide, reactive, ref, shallowReactive, toRef, toRefs} from "vue";
import SonOne from "@/components/icons/sonOne.vue";

let obj2=shallowReactive({
    name:'sb',
    innerObj1:{
        age:20
    }
})
let color = ref('red')
provide("color", color);
let obj=reactive({
    age:'18',
})

let objs=toRefs(obj);
const state = reactive({
    name: 'Alice',
    age: 30
});
let { name, age } = toRefs(state);

function  action(){
    console.log(name.value); // 'Alice'
    console.log(age.value);  // 30
color.value='green';
    console.log(isProxy(obj.age))
    name.value='alice30';
    age.value='aliceAge';
    // obj.name='ls';
    // obj.innerObj.age1=20;
    // obj1.name='ls';
    obj2.innerObj1.age=250;
    // obj2.name='cxk';
    //console.log(isReactive(obj2.innerObj1))  //false


    console.log(isReactive(obj));
    console.log(isReactive(objs))
    // console.log(isReactive(obj.age))
    // console.log(isProxy(age.value))

}

</script>

<template>

    <button @click="action">代码！</button>
<!-- {{name}}-->
<!--  {{age}}-->
<son-one></son-one>
</template>

<style scoped>

</style>